<template>
    <!-- <div>
        登录页面
        <button @click="loginHandler">登录</button>
    </div> -->
    <div class="login">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>登录</span>
                </div>
            </template>
            <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="用户名" prop="user">
                    <el-input v-model="formData.user" />
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" autocomplete="true" v-model="formData.password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</template>

<script lang='ts' setup>
import { login } from '@/api/PeopleApi';
import type { ILoginFormData } from '@/interface/ILogin';
import router from '@/router'
import { usePeopleStore } from '@/stores/PeopleStore';
import type { FormInstance, FormRules } from 'element-plus';
import { reactive, ref, type Ref } from 'vue';

// 变量
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const authRef = ref()
const formData = reactive<ILoginFormData>({
    user: '',
    password: '',
})
// 验证规则
const rules = reactive<FormRules<ILoginFormData>>({
    user: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '用户名的长度为3-10', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '密码的长度为6-18', trigger: 'blur' },
    ]
})
// 函数
// 登录
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            // 验证通过  调用登录的api并且 传递两个参数，一个输入的用户名  一个是输入的密码
            const loginData = await login(formData.user, formData.password)
            if (loginData.code === 0) {  //登录成功
                console.log(loginData)
                const store = usePeopleStore()
                store.userInfo = { ...loginData.data }
                router.push({ name:'main' })
            }
        } else {
            // 验证没通过不管了
            console.log('登录失败')
        }
    })
}

// 清空表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style lang='scss' scoped>
card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
    position: fixed;
    max-height: 280px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.login {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #0F2634;
    background-size: 400% 400%;
    animation: flowingGradient 20s ease infinite;
    will-change: background-position;
}

@keyframes flowingGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
</style>